<template>
	<view>
		<u-navbar :border-bottom="false" back-icon-name="home" title-bold title="抢单中心" :custom-back="customBack"></u-navbar>
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<!-- 此处分开写，为了让数据互不影响 -->
		<template v-if="current === 0">
			<order-list :list="grabLists" :current="current"></order-list>
		</template>
		<template v-if="current === 1">
			<order-list :list="inserviceLists" :current="current"></order-list>
		</template>
		<template v-if="current === 2">
			<order-list :list="completedLists" :current="current"></order-list>
		</template>
		<!-- <template v-if="current === 3">
			<order-list :list="canceledLists" :current="current"></order-list>
		</template> -->
	</view>
</template>

<script>
	import orderList from './components/order-list.vue';
	export default {
		data() {
			return {
				list: [{
					name: '抢单大厅'
				}, {
					name: '服务中',
					count: 5 // 这个字段用于tab上显示数字，根据需求，不需要就删掉就行了
				}, {
					name: '已完成'
				} ],
				current: 0,
				grabLists: [1,2,3,4],// 抢单中的数据
				inserviceLists: [1],// 服务中的数据
				completedLists: [1,2],// 已完成的数据
				canceledLists: [1,2,3],// 已完成的数据
			}
		},
		components:{
			orderList
		},
		onLoad(e) {
			console.log(e.current);
			if(e.current) {
				// 组件中用了全等，此处要转number
				this.current = Number(e.current);
				this.initData();
			}
		},
		// 下拉刷新
		onPullDownRefresh(){},
		methods: {
			initData(){
				
			},
			change(index) {
				this.current = index;
			},
			// 跳转个人中心
			customBack() {
				this.$ut.route('pages/rider/index');
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>